<template>
	<!--新增对话框-->
	<el-dialog
		:title="editForm.id ? '编辑' : '新增'"
		:visible.sync="dialogVisible"
		width="900px"
		:before-close="handleClose"
    top="5vh"
	>
		<el-form :model="editForm" :rules="editFormRules" label-position="top" ref="editForm">
			<el-form-item label="报告时间" prop="month" label-width="100px">
        <el-date-picker
          v-model="editForm.date"
          type="month"
          value-format="yyyy.MM"
          placeholder="选择年月">
        </el-date-picker>
			</el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="9万方VLGC" prop="ninevlgc">
            <el-input-number v-model="editForm.ninevlgc" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="7.5万DWT巴拿马型油船" prop="sevenpointfivedwt">
            <el-input-number v-model="editForm.sevenpointfivedwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="7000TEU箱船" prop="seventhousandteu">
            <el-input-number v-model="editForm.seventhousandteu" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="11万DWT阿芙拉型油船" prop="elevendwt">
            <el-input-number v-model="editForm.elevendwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="15万DWT苏伊士型油船" prop="fifteendwt">
            <el-input-number v-model="editForm.fifteendwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="32万DWT-VCLL" prop="thirtytwodwt">
            <el-input-number v-model="editForm.thirtytwodwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="8.2万DWT巴拿马型散货船" prop="eightpointtwodwt">
            <el-input-number v-model="editForm.eightpointtwodwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="5万DWT成品油船" prop="fivedwt">
            <el-input-number v-model="editForm.fivedwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3000TEU箱船" prop="threethousandteu">
            <el-input-number v-model="editForm.threethousandteu" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="17.4万方LNG运输船" prop="seventeenpointfourlng">
            <el-input-number v-model="editForm.seventeenpointfourlng" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="2.4万TEU箱船" prop="twopointfourteu">
            <el-input-number v-model="editForm.twopointfourteu" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item><el-form-item label="21万DWT纽卡斯尔型散货船" prop="twentyonedwt">
            <el-input-number v-model="editForm.twentyonedwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="1.5万TEU箱船" prop="onepointfiveteu">
            <el-input-number v-model="editForm.onepointfiveteu" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="7000车PCC" prop="seventhousandpcc">
            <el-input-number v-model="editForm.seventhousandpcc" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="18万DWT散货船" prop="eighteendwt">
            <el-input-number v-model="editForm.eighteendwt" :precision="1" :step="0.1" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="resetForm('editForm')">取 消</el-button>
			<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {formatServerDate} from '@/utils/date';
import { isNumber } from '@/utils/validate';
export default {
	name: 'AddUpdateShipTypePrice',
	components: {},
	data() {
		return {
			editForm: {},
			loading: false,
			dialogVisible: false,
			editFormRules: {
        ninevlgc: [{ required: true, message: '请输入9万方VLGC', trigger: 'blur' }],
        sevenpointfivedwt: [{ required: true, message: '请输入7.5万DWT巴拿马型油船', trigger: 'blur' }],
        seventhousandteu: [{ required: true, message: '请输入7000TEU箱船', trigger: 'blur' }],
        elevendwt: [{ required: true, message: '请输入11万DWT阿芙拉型油船', trigger: 'blur' }],
        fifteendwt: [{ required: true, message: '请输入15万DWT苏伊士型油船', trigger: 'blur' }],
        thirtytwodwt: [{ required: true, message: '请输入32万DWT-VCLL', trigger: 'blur' }],
        seventhousandteu: [{ required: true, message: '请输入8.2万DWT巴拿马型散货船', trigger: 'blur' }],
        fivedwt: [{ required: true, message: '请输入5万DWT成品油船', trigger: 'blur' }],
        threethousandteu: [{ required: true, message: '请输入3000TEU箱船', trigger: 'blur' }],
        seventeenpointfourlng: [{ required: true, message: '请输入17.4万方LNG运输船', trigger: 'blur' }],
        twopointfourteu: [{ required: true, message: '请输入2.4万TEU箱船', trigger: 'blur' }],
        twentyonedwt: [{ required: true, message: '请输入21万DWT纽卡斯尔型散货船', trigger: 'blur' }],
        onepointfiveteu: [{ required: true, message: '请输入1.5万TEU箱船', trigger: 'blur' }],
        seventhousandpcc: [{ required: true, message: '请输入7000车PCC', trigger: 'blur' }],
        eighteendwt: [{ required: true, message: '请输入18万DWT散货船', trigger: 'blur' }],
			},
		};
	},
	mounted() {
		// this.getFarmList('');
	},

	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
		},
		handleClose() {
			this.resetForm('editForm');
		},
		submitForm(formName) {

			this.$refs[formName].validate((valid) => {
				if (valid) {
          const {date, ...rest} = this.editForm;
					this.$axios.get('/admin/boat/ship/pricetype/' + (this.editForm.id ? 'edit' : 'edit'), 
            {
              params: {
                ...rest,
              },
            }).then((res) => {
							this.$message({
								showClose: true,
								message: '恭喜你，操作成功',
								type: 'success',
								onClose: () => {
									this.$emit('refreshDataList');
								},
							});
							this.dialogVisible = false;
							this.resetForm(formName);
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		checkIsDisabledDate(date){
			console.log(date);
			return true;
		},
		init(id) {
			this.dialogVisible = true;
			if (id != null && id != '' && id > 0) {
				this.$axios.get('/admin/boat/ship/pricetype/detail?id=' + id).then((res) => {
          const {result = {}} = res;
          const { id, date, ...rest} = result;
          this.editForm = {
              id: id,
              date,
              ...rest,
          };
				});
			}
		},
	},
};
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
